<template>
    <div class="content-box">
        <div class="menu-header">
            <div class="nav-menu">
                <div class="nav-list" @wheel="handleScroll($event)">
                    <el-button :class="tabId === menuItem.id ? 'nav_active' : ''" v-for="menuItem in tabs"
                        :key="menuItem.id" @click="switchTab(menuItem)">{{ menuItem.name
                        }}</el-button>
                </div>
            </div>
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <img src="@/assets/contentRight/content_nine.png" alt="">
                    路数设置<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="wayItem in wayList" :key="wayItem.id" :value="wayItem.id"
                        :command="wayItem.id"><img
                            :src="wayItem.id === currentCommand ? `${wayItem.curImg}` : `${wayItem.img}`" alt=""><span
                            :style="{ 'color': wayItem.id === currentCommand ? '#FF4E33' : '' }">{{
                                wayItem.label }}</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="menu-content">
            <component :is="activeTab"></component>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { getPermission } from '@/api/other'
import { loadOptions, maxVideoSetting } from '@/api/user'
import videoCall from './videoCall.vue'
import caseSearch from './caseSearch.vue'
import caseList from './caseList.vue'
import caseUpload from './caseUpload.vue'
import cardLose from './cardLose.vue'
import location from './location.vue'
import caseScheduing from './caseScheduing.vue'
import refuseInfo from './refuseInfo.vue'
import supplement from './supplement.vue'
import manageExtraction from './manageExtraction.vue'
import caseFeedBack from './caseFeedBack.vue'


export default {
    components: { videoCall, caseList, caseSearch, caseUpload, cardLose, location, caseScheduing, refuseInfo, supplement, manageExtraction, caseFeedBack },
    data() {
        return {
            wayList: [{
                id: 1,
                label: '一路',
                img: require('@/assets/contentRight/content_one.png'),
                curImg: require('@/assets/contentRight/content_cur_one.png')
            },
            {
                id: 2,
                label: '二路',
                img: require('@/assets/contentRight/content_two.png'),
                curImg: require('@/assets/contentRight/content_cur_two.png')
            },
            {
                id: 4,
                label: '四路',
                img: require('@/assets/contentRight/content_four.png'),
                curImg: require('@/assets/contentRight/content_cur_four.png')
            },
            {
                id: 6,
                label: '六路', 
                img: require('@/assets/contentRight/content_six.png'),
                curImg: require('@/assets/contentRight/content_cur_six.png')
            }],
            tabs: [],
            activeTab: "caseFeedBack",
            tabId: 10,
            wayNum: 1,
            currentCommand: 1
        }
    },
    async created() {
        try {
            this.tabs = await getPermission(this.userInfo.userType);
        } catch (error) {
            console.error('Failed to load usertype mapping:', error);
        }
        this.loadOptions()
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
        }),
    },
    methods: {
        // 获取路数
        loadOptions() {
            loadOptions({ uid: this.userInfo.userId }).then(res => {
                if (res.data) {
                    const data = JSON.parse(res.data);
                    this.currentCommand = data.videoNum;
                    this.$store.dispatch('video/setWaynum', this.currentCommand);
                }
            })
        },
        switchTab(mItem) {
            this.activeTab = mItem.component
            this.tabId = mItem.id
        },
        handleCommand(command) {
            this.currentCommand = command;
            const query = {
                maxSetting: command.toString(),
                uid: this.userInfo.userId
            }
            maxVideoSetting(query).then(() => {
                this.$store.dispatch('video/setWaynum', command);
            })

        },
        handleScroll(e) {
            const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
            e.currentTarget.scrollLeft -= delta * 100
            e.preventDefault
        }
    },
}
</script>
<style lang='scss' scoped>
.content-box {
    width: calc(100% - 370px);
    padding: 15px 15px 10px 15px;

    .menu-header {
        display: flex;
        justify-content: space-between;
    }

    .nav-menu {
        width: calc(100% - 95px);
        overflow: hidden;

        .nav-list {
            padding: 5px;
            display: flex;
            overflow-x: auto;
        }

        .nav-list::-webkit-scrollbar {
            display: block !important;
            width: 8px;
            height: 8px;
        }

        .nav-list::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: rgb(222, 230, 230);
        }

        .nav-list::-webkit-scrollbar-track {
            border-radius: 6px;
        }
    }

    .el-button {
        height: 32px;
        line-height: 5px;
        border: 1px solid #000;
        color: #000;
        font-size: 12px;
    }

    .el-button:hover,
    .nav_active {
        color: #fff;
        background: url('../../assets/contentRight/content_nav_group.png') no-repeat;
        background-size: 100% 100%;
        border: 0;
    }

    .el-dropdown-link {
        display: flex;
        align-items: center;
        cursor: pointer;

        img {
            width: 12px;
            height: 12px;
            margin-right: 5px;
        }
    }
}

.el-dropdown-menu {
    font-size: 12px;

    img {
        width: 15px;
        height: 15px;
        margin-right: 25px;
    }

    .el-dropdown-menu__item:hover {
        background: #e9e9e9;
        color: #000;

    }
}

.menu-content {
    height: calc(100% - 50px);
    margin: 5px;
    background: #FAFAFA;
}
</style>
